<!DOCTYPE html>
<html>
<head>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>后台管理系统</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport"> 
    <link rel="stylesheet" href="../plugins/bootstrap/css/bootstrap.min.css">
    <!--echars-->
    <script src="/js/plugins/jquery/jquery.min.js"></script>
    <!--<script src="/echarts.min.js"></script>-->
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>

    <link rel="stylesheet" href="../plugins/adminLTE/css/AdminLTE.css">
    <link rel="stylesheet" href="../plugins/adminLTE/css/skins/_all-skins.min.css">
    <link rel="stylesheet" href="../css/style.css">
</head>

<body class="hold-transition skin-blue sidebar-mini">

   <!-- 内容区域 -->


            <!-- 内容头部 -->
            <section class="content-header">
                <h1>
                    控制面板
                    <small>首页</small>
                </h1>
                <ol class="breadcrumb">
                    <li><a href="all-admin-index.html"><i class="fa fa-dashboard"></i> 首页</a></li>
                </ol>
            </section>
            <!-- 内容头部 /-->

            <!-- 正文区域 -->
            <section class="content">


                <!-- 统计数值 -->
                <div class="row">
                    <div class="col-lg-3 col-xs-6">
                        <!-- small box -->
                            <div id="main" style="width: 800px;height:400px;font-size: 20px"></div>
                    </div>
               <!--     <div class="col-lg-3 col-xs-6">
                        &lt;!&ndash; small box &ndash;&gt;
                        <div class="small-box bg-aqua">
                            <div class="inner">
                                <h3>150</h3>

                                <p>新订单</p>
                            </div>
                            <div class="icon">
                                <i class="ion ion-bag"></i>
                            </div>
                            <a href="all-order-manage-list.html" class="small-box-footer">详细 <i class="fa fa-arrow-circle-right"></i></a>
                        </div>
                    </div>-->
                    <!-- ./col -->
                 <!--   <div class="col-lg-3 col-xs-6">
                        &lt;!&ndash; small box &ndash;&gt;
                        <div class="small-box bg-green">
                            <div class="inner">
                                <h3>53<sup style="font-size: 20px">%</sup></h3>

                                <p>转化率</p>
                            </div>
                            <div class="icon">
                                <i class="ion ion-stats-bars"></i>
                            </div>
                            <a href="all-ad-statistics-list.html" class="small-box-footer">详细 <i class="fa fa-arrow-circle-right"></i></a>
                        </div>
                    </div>
                    &lt;!&ndash; ./col &ndash;&gt;
                    <div class="col-lg-3 col-xs-6">
                        &lt;!&ndash; small box &ndash;&gt;
                        <div class="small-box bg-yellow">
                            <div class="inner">
                                <h3>44</h3>

                                <p>新注册用户</p>
                            </div>
                            <div class="icon">
                                <i class="ion ion-person-add"></i>
                            </div>
                            <a href="all-member-manage-list.html" class="small-box-footer">详细 <i class="fa fa-arrow-circle-right"></i></a>
                        </div>
                    </div>
                    &lt;!&ndash; ./col &ndash;&gt;
                    <div class="col-lg-3 col-xs-6">
                        &lt;!&ndash; small box &ndash;&gt;
                        <div class="small-box bg-red">
                            <div class="inner">
                                <h3>65</h3>

                                <p>日PV</p>
                            </div>
                            <div class="icon">
                                <i class="ion ion-pie-graph"></i>
                            </div>
                            <a href="all-ad-statistics-list.html" class="small-box-footer">详细 <i class="fa fa-arrow-circle-right"></i></a>
                        </div>
                    </div>-->
                    <!-- ./col -->
                </div>
                <!-- /.row -->
            </section>
            <!-- 正文区域 /-->

        <!-- 内容区域 /-->
</body>

</html>
<script>
    $(function () {
       // show();
        getMonthlySales();
    })

  /*  function show() {
        var myChart = echarts.init(document.getElementById('main'));
        $.ajax({
            url: "/echars/getChars",
            type: "post",
            dataType: "json",
            async: false,
            success : function (result) {
                var result = result.data;
                console.log(result);
                var colors = [ '#f3d957', '#d14a61'];//可以设置颜色,多个系列可以写多个
                myChart.setOption({
                    color : colors,
                    title: {
                        text: '商品订单月销量'
                    },
                    tooltip: {
                        trigger : 'axis',
                        formatter: function (params, ticket, callback) {

                            console.log(params)
                            var html = '当月销量:'+params.data+'<br>';
                            html += '环比增长:'
                            return html;
                        }

                    },
                    legend: {
                        data:['销量']
                    },
                    xAxis: {name: "月份",data: result.mounth},
                    yAxis: {},
                    series: [{
                        name: "销量", type: "line",data: result.count,
                    }],

                })
            }
        })

    }*/
    function getMonthlySales() {
        var myChart = echarts.init(document.getElementById('main'));
        $.ajax({
            url: "/echars/getMonthlySales",
            type: "post",
            dataType: "json",
            async: false,
            success : function (result) {
                console.log(result.data)
                var fee = result.data.fee;
                var hb = result.data.hb;
                var tb = result.data.tb;
                console.log(result);
                var colors = [ '#f3d957', '#d14a61'];//可以设置颜色,多个系列可以写多个
                myChart.setOption({
                    color : colors,
                    title: {
                        text: '月度订单实时报表',
                        left: 'center',
                        align: 'right'
                    },
                    tooltip: {
                        trigger : 'axis',
                        formatter: function (params, ticket, callback) {
                            console.log(params[0].dataIndex)
                            /* alert(year.length)*/
                            var vigue = '';
                            vigue += "销量:" + fee[params[0].dataIndex] +"<br>";
                            vigue += "环比增长:" + hb[params[0].dataIndex] + "%<br>";
                            vigue += "同比增长:" + tb[params[0].dataIndex] + "%<br>";
                            return vigue;
                        }
                    },
                    legend: {
                        data:['销量'],
                        left: 10,
                        toolbox: {
                            show: true,
                            orient: 'vertical',
                            left: 'right',
                            top: 'center',
                            feature: {
                                mark: {show: true},
                                dataView: {show: true, readOnly: false},
                                magicType: {show: true, type: ['line', 'bar', 'stack', 'tiled']},
                                restore: {show: true},
                                saveAsImage: {show: true}
                            }
                        },
                    },
                    xAxis: {name: "月份/2020",data: ["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"]},
                    yAxis: {name: "销量"},
                    series: [{
                        name: "销量", type: "line",data: result.data.fee
                    }],
                })

            }
        })

    }
</script>

